<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Pisces","version":"7.7.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="HTML，CSS">
<meta property="og:type" content="article">
<meta property="og:title" content="Java日拱一卒-day15">
<meta property="og:url" content="http://yoursite.com/2020/05/07/Java%E6%97%A5%E6%8B%B1%E4%B8%80%E5%8D%92-day15/index.html">
<meta property="og:site_name" content="很惭愧，就做了一点微小的工作">
<meta property="og:description" content="HTML，CSS">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://yoursite.com/2020/05/07/Java%E6%97%A5%E6%8B%B1%E4%B8%80%E5%8D%92-day15/case1.jpg">
<meta property="og:image" content="http://yoursite.com/2020/05/07/Java%E6%97%A5%E6%8B%B1%E4%B8%80%E5%8D%92-day15/case2.jpg">
<meta property="article:published_time" content="2020-05-07T09:55:55.000Z">
<meta property="article:modified_time" content="2020-05-18T02:36:02.055Z">
<meta property="article:author" content="文予">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://yoursite.com/2020/05/07/Java%E6%97%A5%E6%8B%B1%E4%B8%80%E5%8D%92-day15/case1.jpg">

<link rel="canonical" href="http://yoursite.com/2020/05/07/Java%E6%97%A5%E6%8B%B1%E4%B8%80%E5%8D%92-day15/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>Java日拱一卒-day15 | 很惭愧，就做了一点微小的工作</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">很惭愧，就做了一点微小的工作</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">念念不忘，必有回响</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/05/07/Java%E6%97%A5%E6%8B%B1%E4%B8%80%E5%8D%92-day15/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/uploads/wenyu.png">
      <meta itemprop="name" content="文予">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="很惭愧，就做了一点微小的工作">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Java日拱一卒-day15
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-05-07 17:55:55" itemprop="dateCreated datePublished" datetime="2020-05-07T17:55:55+08:00">2020-05-07</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-05-18 10:36:02" itemprop="dateModified" datetime="2020-05-18T10:36:02+08:00">2020-05-18</time>
              </span>

          
            <div class="post-description">HTML，CSS</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h2 id="HTML的结构"><a href="#HTML的结构" class="headerlink" title="HTML的结构"></a>HTML的结构</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>网页的标题<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello WORLD<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ol>
<li><code>&lt;!DOCTYPE html&gt;</code>是文档声明，用来声明HTML文档的规范和版本</li>
<li><code>&lt;head&gt;&lt;/head&gt;</code>头部分，用来存放HTML文档的基本属性信息，比如网页标题，文档编码等</li>
<li><code>&lt;body&gt;&lt;/body&gt;</code>体部分，用来存放网页可视化数据</li>
<li><code>&lt;title&gt;&lt;/title&gt;</code>声明网页的标题</li>
<li><code>&lt;meta charset=&quot;utf-8&quot;/&gt;</code>通知浏览器用哪一个编码打开HTML文档</li>
</ol>
<h2 id="HTML语法"><a href="#HTML语法" class="headerlink" title="HTML语法"></a>HTML语法</h2><ul>
<li><ol>
<li>HTML标签<br>标签：也叫做标记、元素等，标签分为开始标签，例如：</li>
</ol>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span>、<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>结束标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span>、<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>开始标签和结束标签之间还可以包含其他内容</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">titile</span>&gt;</span>声明网页的标题<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>有些标签开始标签和结束标签之间没有内容要包裹，通常可以写成自闭标签：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span>/&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span> <span class="tag">&lt;<span class="name">hr</span>/&gt;</span> <span class="tag">&lt;<span class="name">input</span>/&gt;</span> <span class="tag">&lt;<span class="name">img</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><ol start="2">
<li>HTML属性</li>
</ol>
</li>
</ul>
<p>在标签上可以声明属性(属性不能独立存在,必须声明在标签上)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"d1"</span> <span class="attr">class</span>=<span class="string">"c1"</span> <span class="attr">style</span>=<span class="string">"color:red;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>标签上可以声明多个属性，多个属性之间用空格分隔。标签上的属性的值可以使用单引号或者双引号引起来：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> <span class="attr">id</span>=<span class="string">"m1"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">'UTF-8'</span> <span class="attr">id</span>=<span class="string">'m1'</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><ol start="3">
<li>注释</li>
</ol>
</li>
</ul>
<p>格式<code>&lt;!-- 注释内容 ---&gt;</code></p>
<ul>
<li><ol start="4">
<li>空格和换行</li>
</ol>
</li>
</ul>
<p>在浏览器中，多个连续的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。<br>可以用<code>&lt;br/&gt;</code>标签换行，用<code>&amp;nbsp;</code>或者<code>&amp;emsp;</code>做空格</p>
<h2 id="HTML标签"><a href="#HTML标签" class="headerlink" title="HTML标签"></a>HTML标签</h2><h3 id="图像标签"><a href="#图像标签" class="headerlink" title="图像标签"></a>图像标签</h3><p>通过<code>img</code>标签可以在网页中插入一幅图像</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"./imgs/meinv.jpg"</span> <span class="attr">width</span>=<span class="string">"50%"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"./imgs/lpx.jpg"</span>  <span class="attr">width</span>=<span class="string">"50%"</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<p>其中src属性用于指定图片的路径（推荐使用相对路径）<br>width属性用于指定宽度<br>height用于指定图片的高度</p>
<h3 id="超链接标签"><a href="#超链接标签" class="headerlink" title="超链接标签"></a>超链接标签</h3><p>超链接标签就是a标签，通过a标签可以在网页中创建只想另外一个文档的超链接</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 跳转到本地的一个网页 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"01-第一个网页.html"</span>&gt;</span>01-第一个网页.html<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 跳转到百度首页 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.baidu.com"</span>&gt;</span>百度一下，你就不知道<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 点击图片跳转到tmooc --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">target</span>=<span class="string">"_blank"</span> <span class="attr">href</span>=<span class="string">"http://www.tmooc.cn"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">alt</span>=<span class="string">"tmooc"</span> <span class="attr">src</span>=<span class="string">"imgs/tmooc.png"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>其中<code>href</code>属性用于指定点击超链接后将要跳转到的URL地址</p>
<p><code>target</code>属性用于指定以何种方式打开超链接</p>
<p><code>_self</code>：默认值, 表示在当前窗口中打开超链接</p>
<p><code>_blank</code>：表示在新的窗口中打开超链接</p>
<h3 id="表格标签"><a href="#表格标签" class="headerlink" title="表格标签"></a>表格标签</h3><ol>
<li>插入一个3*3的表格</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>案例：在网页中插入一个3*3的表格<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span><span class="comment">&lt;!-- 用于在网页中定义一个表格 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="comment">&lt;!-- 用于定义一个表格行 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>表头1<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>表头2<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>表头3<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>11<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="comment">&lt;!-- 用于定义一个单元格 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>12<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>13<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>21<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>22<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>23<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>31<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>32<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>33<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>效果如下：<br><img src="/2020/05/07/Java%E6%97%A5%E6%8B%B1%E4%B8%80%E5%8D%92-day15/case1.jpg" alt="case1"></p>
<p>在head标签中添加如下内容</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">    <span class="comment">/* style标签内只能书写css注释和css代码 */</span></span></span><br><span class="line">    table&#123;</span><br><span class="line"><span class="css">        <span class="selector-tag">border</span>:*2<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-tag">red</span>; <span class="comment">/* 为表格添加边框 */</span></span></span><br><span class="line"><span class="css">        <span class="selector-tag">border-collapse</span>: <span class="selector-tag">collapse</span>; <span class="comment">/* 设置边框合并 */</span></span></span><br><span class="line"><span class="css">        <span class="selector-tag">background-color</span>: <span class="selector-tag">pink</span>; <span class="comment">/* 为表格设置背景颜色 */</span></span></span><br><span class="line"><span class="css">        <span class="selector-tag">width</span>: 70%; <span class="comment">/* 为表格设置宽度 */</span></span></span><br><span class="line"><span class="css">        <span class="comment">/* margin-left: 15%; */</span></span></span><br><span class="line"><span class="css">        <span class="comment">/* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */</span></span></span><br><span class="line">        margin-left: auto;</span><br><span class="line">        margin-right: auto;</span><br><span class="line">    &#125;</span><br><span class="line">    td,th&#123;</span><br><span class="line"><span class="css">        <span class="selector-tag">border</span><span class="selector-pseudo">:2px</span> <span class="selector-tag">solid</span> <span class="selector-tag">red</span>; <span class="comment">/* 为单元格添加边框 */</span></span></span><br><span class="line"><span class="css">        <span class="selector-tag">border-collapse</span>: *<span class="selector-tag">collapse</span>*; <span class="comment">/* 设置边框合并 */</span></span></span><br><span class="line"><span class="css">        <span class="selector-tag">padding</span>: 5<span class="selector-tag">px</span>; <span class="comment">/* 设置单元格边框和内容的距离(内边距) */</span></span></span><br><span class="line">    &#125;</span><br><span class="line">    h1&#123;</span><br><span class="line"><span class="css">        <span class="comment">/* border: 2px solid blue; */</span></span></span><br><span class="line"><span class="css">        <span class="selector-tag">text-align</span>: *<span class="selector-tag">center</span>*; <span class="comment">/* 设置元素中的内容水平居中 */</span></span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>效果如下：<br><img src="/2020/05/07/Java%E6%97%A5%E6%8B%B1%E4%B8%80%E5%8D%92-day15/case2.jpg" alt="case2"></p>
<ol>
<li>表格标签介绍</li>
</ol>
<table>
<thead>
<tr>
<th align="center">标签</th>
<th align="center">介绍</th>
</tr>
</thead>
<tbody><tr>
<td align="center">table</td>
<td align="center">用于定义一个表格</td>
</tr>
<tr>
<td align="center">tr</td>
<td align="center">用于定义表格的行</td>
</tr>
<tr>
<td align="center">td</td>
<td align="center">用于定义表格中的单元格</td>
</tr>
<tr>
<td align="center">th</td>
<td align="center">用于定义表头行中的单元格（th中的文本默认居中加粗）</td>
</tr>
</tbody></table>
<h3 id="表单标签"><a href="#表单标签" class="headerlink" title="表单标签"></a>表单标签</h3><ol>
<li>表单的作用</li>
</ol>
<p>向服务器提交数据的两种方式：</p>
<ul>
<li><ol>
<li>通过表单提交</li>
</ol>
<p>表单中可以包含表单项标签，在表单项中可以填写数据（比如用户名、密码），填写完成后通过提交表单，可以将表单中的数据提骄傲给相应的服务器。</p>
</li>
<li><ol start="2">
<li>通过超链接向服务器提交数据</li>
</ol>
</li>
</ul>
<p><a href="https://www.baidu.com/s?ie=UTF-8&amp;wd=苟利国家生死以" target="_blank" rel="noopener">https://www.baidu.com/s?ie=UTF-8&amp;wd=苟利国家生死以</a></p>
<p>在地址栏URL后面可以通过问号<code>?</code>拼接参数，参数可以有度哟个，用<code>&amp;</code>分隔，参数还分为参数名（例如：username/pwd/like）以及参数值（例如：张三/123/篮球）</p>
<ol>
<li>表单标签</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"url地址"</span> <span class="attr">method</span>=<span class="string">"提交方式"</span>&gt;</span><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>action</code>属性用于指定表单的提交地址，<code>method=&quot;GET/POST&quot;</code>属性用于指定表单的提交方式。</p>
<h3 id="表单项标签"><a href="#表单项标签" class="headerlink" title="表单项标签"></a>表单项标签</h3><ul>
<li><ol>
<li><code>input</code>元素：</li>
</ol>
</li>
<li><p>(1)普通文本输入框（用于用户名/昵称等）</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"username"</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>(2)密码输入框(比如:密码/确认密码等)</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">name</span>=<span class="string">"pwd"</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>(3)单选框(比如:性别/部门等)</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"gender"</span>/&gt;</span>男</span><br></pre></td></tr></table></figure>

<ul>
<li>(4)复选框</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"like"</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>(5)普通按钮(比如:换一张图片)</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"换一张"</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>(6)提交按钮(比如:提交/注册/登录)</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"提交/注册/登录"</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<p>提交按钮用于提交表单中的数据到服务器中</p>
<ul>
<li><ol start="2">
<li><code>select</code>、<code>option</code>标签</li>
</ol>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">select</span> <span class="attr">name</span>=<span class="string">"city"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"beijing"</span>&gt;</span>北京<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"shanghai"</span>&gt;</span>上海<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">selected</span>=<span class="string">"selected"</span>&gt;</span>广州<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span>&gt;</span>深圳<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>select</code>用于定义一个下拉选框</p>
<p><code>option</code>用于定义下拉选框上的选项</p>
<p><code>selected</code>设置当前<code>option</code>选项默认被选中</p>
<ul>
<li><ol start="3">
<li><code>textarea</code>多行文本</li>
</ol>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">textarea</span> <span class="attr">name</span>=<span class="string">"description"</span> <span class="attr">cols</span>=<span class="string">"30"</span> <span class="attr">rows</span>=<span class="string">"5"</span> <span class="attr">placeholder</span>=<span class="string">"请输入描述信息..."</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="一些细节问题"><a href="#一些细节问题" class="headerlink" title="一些细节问题"></a>一些细节问题</h3><ul>
<li><ol>
<li>对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加<code>name</code>属性，没有<code>name</code>属性的项在提交时会被忽略</li>
</ol>
</li>
<li><ol start="2">
<li>同组的多个单选框必须具有相同的<code>name</code>属性值</li>
</ol>
</li>
<li><ol start="3">
<li>如果要改变单选框、复选框的默认提交值，则需要添加<code>value</code>属性</li>
</ol>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"gender"</span> <span class="attr">value</span>=<span class="string">"male"</span>/&gt;</span>男</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"gender"</span> <span class="attr">value</span>=<span class="string">"female"</span>/&gt;</span>女</span><br></pre></td></tr></table></figure>

<ul>
<li><ol start="4">
<li>在单选框或复选框标签上添加一个<code>checked=&quot;checked&quot;</code>属性，就可以让当前单选框或复选框默认被选中。在<code>option</code>标签上添加一个<code>selected=&quot;selected&quot;</code>属性，可以让当前<code>option</code>选项默认被选中</li>
</ol>
</li>
<li><ol start="5">
<li>如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容。</li>
</ol>
</li>
</ul>
<h2 id="注册表单示例"><a href="#注册表单示例" class="headerlink" title="注册表单示例"></a>注册表单示例</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Insert title here<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css"><span class="comment">/* style标签内只能书写css注释和css代码 */</span></span></span><br><span class="line">table &#123;</span><br><span class="line"><span class="css">    <span class="selector-tag">border</span>: 2<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-tag">red</span>; <span class="comment">/* 为表格添加边框 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">border-collapse</span>: <span class="selector-tag">collapse</span>; <span class="comment">/* 设置边框合并 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">background-color</span>: <span class="selector-tag">lightgrey</span>; <span class="comment">/* 为表格设置背景颜色 */</span></span></span><br><span class="line"><span class="css">    <span class="comment">/* margin-left: 15%; */</span></span></span><br><span class="line"><span class="css">    <span class="comment">/* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */</span></span></span><br><span class="line">    margin-left: auto;</span><br><span class="line">    margin-right: auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">td, th &#123;</span><br><span class="line"><span class="css">    <span class="selector-tag">border</span>: 2<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-tag">red</span>; <span class="comment">/* 为单元格添加边框 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">border-collapse</span>: <span class="selector-tag">collapse</span>; <span class="comment">/* 设置边框合并 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">padding</span>: 5<span class="selector-tag">px</span>; <span class="comment">/* 设置单元格边框和内容的距离(内边距) */</span></span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">h1 &#123;</span><br><span class="line"><span class="css">    <span class="comment">/* border: 2px solid blue; */</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">text-align</span>: <span class="selector-tag">center</span>; <span class="comment">/* 设置元素中的内容水平居中 */</span></span></span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>欢迎注册<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"#"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- 用户名输入框 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>用户名:<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"username"</span> /&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- 密码输入框 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>密码:<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">name</span>=<span class="string">"pwd"</span> /&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- 性别单选框 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>性别:<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">checked</span>=<span class="string">"checked"</span> <span class="attr">name</span>=<span class="string">"gender"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">value</span>=<span class="string">"male"</span> /&gt;</span>男 <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"gender"</span> <span class="attr">value</span>=<span class="string">"female"</span> /&gt;</span>女</span><br><span class="line">                <span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- 爱好复选框/多选框 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>爱好:<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"like"</span> <span class="attr">value</span>=<span class="string">"basketball"</span> /&gt;</span>篮球</span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">checked</span>=<span class="string">"checked"</span> <span class="attr">name</span>=<span class="string">"like"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">value</span>=<span class="string">"football"</span> /&gt;</span>足球 <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"like"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">value</span>=<span class="string">"volleyball"</span> /&gt;</span>排球<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- 城市下拉选框 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>城市:<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">select</span> <span class="attr">name</span>=<span class="string">"city"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"beijing"</span>&gt;</span>北京<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"shanghai"</span>&gt;</span>上海<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">option</span> <span class="attr">selected</span>=<span class="string">"selected"</span>&gt;</span>广州<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">option</span>&gt;</span>深圳<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">select</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- 自我描述 多行文本输入框 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>自我描述:<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">textarea</span> <span class="attr">name</span>=<span class="string">"description"</span> <span class="attr">cols</span>=<span class="string">"30"</span> <span class="attr">rows</span>=<span class="string">"5"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">placeholder</span>=<span class="string">"请输入描述信息..."</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- 提交按钮 --&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- colspan: 设置单元格横跨的列数 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span> <span class="attr">colspan</span>=<span class="string">"2"</span> <span class="attr">style</span>=<span class="string">"text-align: center;"</span>&gt;</span><span class="tag">&lt;<span class="name">input</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"提交"</span> /&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="CSS概述"><a href="#CSS概述" class="headerlink" title="CSS概述"></a>CSS概述</h2><h3 id="什么是CSS"><a href="#什么是CSS" class="headerlink" title="什么是CSS"></a>什么是CSS</h3><p>CSS全名是层叠样式表，是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言</p>
<h3 id="在HTML中引入CSS"><a href="#在HTML中引入CSS" class="headerlink" title="在HTML中引入CSS"></a>在HTML中引入CSS</h3><h4 id="通过style属性（不推荐）"><a href="#通过style属性（不推荐）" class="headerlink" title="通过style属性（不推荐）"></a>通过style属性（不推荐）</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">    1.通过标签上的style属性给div设置样式 </span></span><br><span class="line"><span class="comment">    边框:2px solid red </span></span><br><span class="line"><span class="comment">    字体大小:26px</span></span><br><span class="line"><span class="comment">    背景颜色为:pink</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"border:2px solid red;font-size:26px;background:pink;"</span>&gt;</span>这是一个div...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>由于上面这种方式是将css样式代码，直接写在标签上的style属性内部，如果属性太多，容易造成页面结构的混乱，不利于后期的维护。可以将CSS集中存放，统一管理，提高复用性</p>
<h4 id="通过link连接引入外部css文件"><a href="#通过link连接引入外部css文件" class="headerlink" title="通过link连接引入外部css文件"></a>通过link连接引入外部css文件</h4><p>在head标签内部，通过一个link标签可以引入外部的CSS文件</p>
<p>这种方式是将所有的css代码集中在一个单独的css文件中统一管理，真正的实现了将css代码和html代码的分离，实现了代码的复用。</p>
<p>代码示例：html中引入demo.css文件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 3.通过link标签引入外部的css文件，为p元素设置样式如下： </span></span><br><span class="line"><span class="comment">    边框: 2px solid blue;</span></span><br><span class="line"><span class="comment">    字体颜色:red</span></span><br><span class="line"><span class="comment">    字体设置为华文琥珀</span></span><br><span class="line"><span class="comment">    设置首行文本缩进50px</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 引入demo.css文件(中的样式) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>  <span class="attr">href</span>=<span class="string">"demo.css"</span>  /&gt;</span></span><br></pre></td></tr></table></figure>

<p>demo.css文件</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@charset</span> <span class="string">"UTF-8"</span>;</span><br><span class="line"><span class="selector-tag">p</span>&#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid blue;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">font-family</span>: 华文琥珀;</span><br><span class="line">    <span class="attribute">text-indent</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="CSS选择器"><a href="#CSS选择器" class="headerlink" title="CSS选择器"></a>CSS选择器</h3><p>CSS语法规则如下</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span>&#123;</span><br><span class="line">    <span class="attribute">property</span>:value;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>p</code>：选择器，浏览器根据选择器决定受css样式影响的HTML元素（标签）<br><code>property</code>：属性，就是要改变的样式名，每个属性都有一个值，用”<code>:</code>“分开，用<code>{ }</code>包围<br>例如</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>:red;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">30px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="标签名选择器"><a href="#标签名选择器" class="headerlink" title="标签名选择器"></a>标签名选择器</h4><p>标签名选择器的格式是：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">标签名&#123;</span><br><span class="line">    属性:值;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>标签名选择器，可以决定哪些标签被动的使用这个样式。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>div 标签 1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>div 标签 2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>span 标签 1<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>span 标签 2<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。<br>并且修改所有span标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。</p>
<p>示例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>CSS 选择器<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">        div&#123;</span><br><span class="line">            border: 1px solid yellow;</span><br><span class="line">            color: blue;</span><br><span class="line">            font-size: 30px;</span><br><span class="line">        &#125;</span><br><span class="line">        span&#123;</span><br><span class="line">            border: 5px dashed blue;</span><br><span class="line">            color: yellow;</span><br><span class="line">            font-size: 20px;</span><br><span class="line">        &#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。</span></span><br><span class="line"><span class="comment">并且修改所有span标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>div 标签 1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>div 标签 2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>span 标签 1<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>span 标签 2<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="id选择器"><a href="#id选择器" class="headerlink" title="id选择器"></a>id选择器</h4><p>id选择器的格式为</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">#id值&#123;</span><br><span class="line">    属性:值;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>id选择器可以通过id属性选择性的使用这个样式。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* ----- id选择器 -----</span></span><br><span class="line"><span class="comment">用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/</span></span><br><span class="line"><span class="selector-id">#p1</span>&#123; <span class="comment">/* 选中id值为p1的元素 */</span></span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">24px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#a06649</span>;</span><br><span class="line">    <span class="attribute">text-indent</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"p1"</span>&gt;</span>这是一个p元素!!!<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="后代选择器"><a href="#后代选择器" class="headerlink" title="后代选择器"></a>后代选择器</h4><p>选中指定元素内部的指定后代元素</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* ----- 后代选择器 -----</span></span><br><span class="line"><span class="comment">为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/</span></span><br><span class="line"><span class="selector-tag">p</span> <span class="selector-tag">span</span>&#123; <span class="comment">/* 匹配所有p元素内部的所有span元素 */</span></span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">18px</span>;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">background</span>: pink;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* p,span&#123;&#125; 匹配所有的p元素和所有的span元素 */</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"p1"</span>&gt;</span></span><br><span class="line">    这是一个p元素!!!</span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>这是一个span元素!!!<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h4><p>在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">选择器<span class="selector-attr">[属性条件]</span>...&#123;</span><br><span class="line">    css样式</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h3 id="常用属性总结"><a href="#常用属性总结" class="headerlink" title="常用属性总结"></a>常用属性总结</h3><h4 id="文本属性"><a href="#文本属性" class="headerlink" title="文本属性"></a>文本属性</h4><ul>
<li><ol>
<li><code>text-align</code>：文本水平对齐方式</li>
</ol>
</li>
</ul>
<table>
<thead>
<tr>
<th align="center">取值</th>
<th align="center">对齐方式</th>
</tr>
</thead>
<tbody><tr>
<td align="center">left</td>
<td align="center">左对齐（默认值）</td>
</tr>
<tr>
<td align="center">right</td>
<td align="center">右对齐</td>
</tr>
<tr>
<td align="center">center</td>
<td align="center">居中</td>
</tr>
<tr>
<td align="center">justify</td>
<td align="center">两端对齐</td>
</tr>
</tbody></table>
<ul>
<li><ol start="2">
<li><code>text-decoration</code>：设置文本的下划线样式，常用取值为<code>underline</code>有下划线、<code>none</code>无下划线</li>
</ol>
</li>
<li><ol start="3">
<li><code>text-indent</code>：首行缩进，单位：像素/百分比</li>
</ol>
</li>
<li><ol start="4">
<li><code>letter-spacing</code>：设置字符间隔/间距，其常用取值为:normal/像素值</li>
</ol>
</li>
<li><ol start="5">
<li><code>text-shadow</code>：设置字体阴影，其取值为：<br><code>像素值 像素值 像素值 颜色值</code><br>第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色</li>
</ol>
</li>
</ul>
<h4 id="字体属性"><a href="#字体属性" class="headerlink" title="字体属性"></a>字体属性</h4><p><code>font-size</code>：设置字体大小</p>
<p><code>font-weight</code>：设置字体粗细 bold、bolder、normal 100/200/300../900</p>
<p><code>font-family</code>：设置字体，比如微软雅黑、黑体、楷体等</p>
<p><code>color</code>：设置字体颜色</p>
<h4 id="背景属性"><a href="#背景属性" class="headerlink" title="背景属性"></a>背景属性</h4><p><code>background-color</code>：设置背景颜色</p>
<p><code>background-image</code>：设置背景图片，url(‘图片的路径’);</p>
<p><code>background-repeat</code>：设置或检索对象的背景图像是否及如何铺排，常用取值：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">repeat</span>(默认值,重复排列)</span><br><span class="line"><span class="selector-tag">repeat-x</span>(横向重复排列,但纵向不重复)</span><br><span class="line"><span class="selector-tag">repeat-y</span>(纵向重复排列,但横向不重复)</span><br><span class="line"><span class="selector-tag">no-repeat</span>(不重复)</span><br></pre></td></tr></table></figure>

<p><code>background-position</code>：设置或检索对象的背景图像位置</p>
<p><code>background</code>: 背景颜色 背景图片 背景图片是否重复 背景图片的位置</p>
<h4 id="边框（border）"><a href="#边框（border）" class="headerlink" title="边框（border）"></a>边框（border）</h4><p>border:2px solid red; – 设置元素的边框(可以同时设置边框的宽度、样式、颜色)</p>
<p>border属性可以拆分为如下设置:</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">border-width</span>: 2<span class="selector-tag">px</span>; <span class="selector-tag">--</span> 设置元素边框的宽度</span><br><span class="line"><span class="selector-tag">border-style</span>: <span class="selector-tag">solid</span>; <span class="selector-tag">--</span> 设置元素边框的样式</span><br><span class="line"><span class="selector-tag">border-color</span>: <span class="selector-tag">red</span>; <span class="selector-tag">--</span> 设置元素边框的颜色</span><br></pre></td></tr></table></figure>

<p>其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">border-top-width</span>: 2<span class="selector-tag">px</span>; <span class="selector-tag">--</span> 设置上边框的宽度</span><br><span class="line"><span class="selector-tag">border-left-width</span>: 2<span class="selector-tag">px</span>; <span class="selector-tag">--</span> 设置左边框的宽度</span><br><span class="line"><span class="selector-tag">border-right-width</span>: 2<span class="selector-tag">px</span>; <span class="selector-tag">--</span> 设置右边框的宽度</span><br><span class="line"><span class="selector-tag">border-bottom-width</span>: 2<span class="selector-tag">px</span>; <span class="selector-tag">--</span> 设置下边框的宽度</span><br></pre></td></tr></table></figure>

<h4 id="其他属性"><a href="#其他属性" class="headerlink" title="其他属性"></a>其他属性</h4><p><code>width</code>：设置元素的宽度</p>
<p><code>height</code>：设置元素的高</p>
<h4 id="补充-颜色设置"><a href="#补充-颜色设置" class="headerlink" title="补充: 颜色设置"></a>补充: 颜色设置</h4><p>颜色取值方式常见的方式有三种:</p>
<p>方式一：设置颜色名，例如：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">red</span>、<span class="selector-tag">green</span>、<span class="selector-tag">blue</span>、<span class="selector-tag">yellow</span>、<span class="selector-tag">cyan</span>、<span class="selector-tag">pink</span>、<span class="selector-tag">white</span>、<span class="selector-tag">black</span>等</span><br></pre></td></tr></table></figure>

<p>方式二：设置#加上六位的十六进制数值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#FF0000</span>（<span class="selector-tag">red</span>）、<span class="selector-id">#00FF00</span>（<span class="selector-tag">green</span>）、<span class="selector-id">#0000FF</span>（<span class="selector-tag">blue</span>）、<span class="selector-id">#FFFF00</span>（<span class="selector-tag">yellow</span>）、<span class="selector-id">#00FFFF</span>（<span class="selector-tag">cyan</span>）等</span><br></pre></td></tr></table></figure>

<p>方式三：设置rgb颜色值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">rgb</span>(255,0,0) 、<span class="selector-tag">rgb</span>(0,255,0) 、<span class="selector-tag">rgb</span>(0,0,255) 、<span class="selector-tag">rgb</span>(255,255,0) 、<span class="selector-tag">rgb</span>(0,255,255) 等</span><br><span class="line">（<span class="selector-tag">red</span>） （<span class="selector-tag">green</span>） （<span class="selector-tag">blue</span>） （<span class="selector-tag">yellow</span>） （<span class="selector-tag">cyan</span>）</span><br></pre></td></tr></table></figure>

    </div>

    
    
    

      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/05/05/Java%E6%97%A5%E6%8B%B1%E4%B8%80%E5%8D%92-day14/" rel="prev" title="Java日拱一卒-day14">
      <i class="fa fa-chevron-left"></i> Java日拱一卒-day14
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/05/13/Java%E6%97%A5%E6%8B%B1%E4%B8%80%E5%8D%92-day16/" rel="next" title="Java日拱一卒-day16">
      Java日拱一卒-day16 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML的结构"><span class="nav-number">1.</span> <span class="nav-text">HTML的结构</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML语法"><span class="nav-number">2.</span> <span class="nav-text">HTML语法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML标签"><span class="nav-number">3.</span> <span class="nav-text">HTML标签</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#图像标签"><span class="nav-number">3.1.</span> <span class="nav-text">图像标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#超链接标签"><span class="nav-number">3.2.</span> <span class="nav-text">超链接标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#表格标签"><span class="nav-number">3.3.</span> <span class="nav-text">表格标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#表单标签"><span class="nav-number">3.4.</span> <span class="nav-text">表单标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#表单项标签"><span class="nav-number">3.5.</span> <span class="nav-text">表单项标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#一些细节问题"><span class="nav-number">3.6.</span> <span class="nav-text">一些细节问题</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#注册表单示例"><span class="nav-number">4.</span> <span class="nav-text">注册表单示例</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS概述"><span class="nav-number">5.</span> <span class="nav-text">CSS概述</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是CSS"><span class="nav-number">5.1.</span> <span class="nav-text">什么是CSS</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在HTML中引入CSS"><span class="nav-number">5.2.</span> <span class="nav-text">在HTML中引入CSS</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#通过style属性（不推荐）"><span class="nav-number">5.2.1.</span> <span class="nav-text">通过style属性（不推荐）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#通过link连接引入外部css文件"><span class="nav-number">5.2.2.</span> <span class="nav-text">通过link连接引入外部css文件</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS选择器"><span class="nav-number">5.3.</span> <span class="nav-text">CSS选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#标签名选择器"><span class="nav-number">5.3.1.</span> <span class="nav-text">标签名选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#id选择器"><span class="nav-number">5.3.2.</span> <span class="nav-text">id选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#后代选择器"><span class="nav-number">5.3.3.</span> <span class="nav-text">后代选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#属性选择器"><span class="nav-number">5.3.4.</span> <span class="nav-text">属性选择器</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#常用属性总结"><span class="nav-number">5.4.</span> <span class="nav-text">常用属性总结</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#文本属性"><span class="nav-number">5.4.1.</span> <span class="nav-text">文本属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#字体属性"><span class="nav-number">5.4.2.</span> <span class="nav-text">字体属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#背景属性"><span class="nav-number">5.4.3.</span> <span class="nav-text">背景属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#边框（border）"><span class="nav-number">5.4.4.</span> <span class="nav-text">边框（border）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#其他属性"><span class="nav-number">5.4.5.</span> <span class="nav-text">其他属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#补充-颜色设置"><span class="nav-number">5.4.6.</span> <span class="nav-text">补充: 颜色设置</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="文予"
      src="/uploads/wenyu.png">
  <p class="site-author-name" itemprop="name">文予</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">29</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">文予</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Pisces</a> 强力驱动
  </div>


        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>











<script>
if (document.querySelectorAll('pre.mermaid').length) {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js', () => {
    mermaid.initialize({
      theme    : 'forest',
      logLevel : 3,
      flowchart: { curve     : 'linear' },
      gantt    : { axisFormat: '%m/%d/%Y' },
      sequence : { actorMargin: 50 }
    });
  }, window.mermaid);
}
</script>


  

  

</body>
</html>
